<script>
import mySetting from '@/mixins/mySetting'
import tpirftForm from './components/form'
import { getList, getAllElementsList, doDelete, doOaCheck } from '@/api/buyoff/TPIRFT'
export default {
  name: 'TPIRFT',
  components: { tpirftForm },
  mixins: [mySetting],
  data() {
    return {
      infoForm: {},
      selectList: {},
      tableLoading: true,
      oaStateVisible: false
    }
  },
  created() {
    this.initList()
    this.getProductTypeList()
    this.getcustomCodeList()
  },
  methods: {
    async initList() {
      const res = await getList(this.$clearNull({ ...this.listQuery, ...this.infoForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    doAdd() {
      this.$refs.tpirftForm.handleOpen()
    },
    handleEdit() {
      this.$refs.tpirftForm.handleOpen(this.multipleSelection[0])
    },
    handleDelete() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map(ele => ele.id)
        doDelete({ ids }).then(res => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    getList(page) {
      this.listQuery = page
      this.initList()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    async getProductTypeList() {
      const res = await getAllElementsList({ ElementName: 'ProductType' })
      this.$set(this.selectList, 'productType', res.data)
    },
    async getcustomCodeList() {
      const res = await getAllElementsList({ ElementName: 'Customer' })
      this.$set(this.selectList, 'customCode', res.data)
    },
    closetes() {
      this.oaStateVisible = false
    },
    // 是否提交审核
    async handleOACheck(id) {
      console.log(id)
      const res = await doOaCheck({ id })
      this.$betterTips(res, this.initList)
    }
  },
  render(h) {
    const searchTags = [
      { label: this.$t('applicant'), prop: 'userId', tag: 'DynInput' },
      { label: this.$t('productType'), prop: 'productType', tag: 'DynSelect' },
      { label: this.$t('customCode'), prop: 'customCode', tag: 'DynSelect' },
      { label: this.$t('modelName'), prop: 'eqpTypename', tag: 'DynInput' },
      { label: this.$t('hostName'), prop: 'eqpName', tag: 'DynInput' },
      { label: this.$t('testorderName'), prop: 'testProgramPath', tag: 'DynInput' }
    ]
    const tableColumns = [
      { prop: '', label: '', type: 'selection' },
      { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
        return (
          <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
        )
      } },
      { prop: 'formId', label: this.$t('formNo'), width: '140px' },
      { prop: 'productType', label: this.$t('productType'), width: '120px' },
      { prop: 'customCode', label: this.$t('customCode'), width: '120px' },
      { prop: 'eqpTypename', label: this.$t('modelName'), width: '120px' },
      { prop: 'eqpName', label: this.$t('hostName'), width: '120px' },
      { prop: 'testProgramPath', label: 'Test Program Path', width: '160px' },
      { prop: 'installType', label: 'Install Type', width: '120px' },
      { prop: 'objectPath', label: 'Object Path', width: '120px' },
      { prop: 'execResult', label: this.$t('ExecResult'), templete: (_scope) => {
        return (
          <el-switch
            vModel={_scope.row.execResult}
            active-value={1}
            inactive-value={0}
            active-color='#13ce66'
            inactive-color='#ff4949'
            disabled/>
        )
      } },
      { prop: 'createTime', label: this.$t('createTime'), width: '180px' },
      { prop: 'creator', label: this.$t('creator'), width: '100px' },
      { prop: 'oaState', label: this.$t('OAReviewStatus'), width: '120px', fixed: 'right', templete: (_scope) => {
        return (
          <el-button type='primary' size='mini' disabled={!!_scope.row.oaState}
            vOn:click={() => this.handleOACheck(_scope.row.id)}>{_scope.row.oaState ? '已审核' : '未审核'}</el-button>
        )
      } }
    ]
    return (
      <div class='TPIR-FT'>
        <el-row>
          <el-col span={24}>
            <dynForm info-form={this.infoForm} search-tags={searchTags} selectList={this.selectList}>
              <el-button
                type='primary'
                icon='el-icon-search'
                on-click={this.doSearch}
              >
                { this.$t('search') }</el-button>
            </dynForm>
          </el-col>
        </el-row>
        <div class='table-buttons'>
          <el-button
            v-btnPermission:add
            type='primary'
            icon='el-icon-plus'
            on-click={this.doAdd}>
            {this.$t('add')}</el-button>
          <el-button
            v-btnPermission:edit
            disabled={this.UpdateDisabled}
            type='primary'
            icon='el-icon-edit'
            on-click={this.handleEdit}>
            {this.$t('modify')}</el-button>
          <el-button
            v-btnPermission:delete
            disabled={this.DeleteDisabled}
            type='danger'
            icon='el-icon-delete'
            on-click={this.handleDelete}
          >{this.$t('delete')}</el-button>
        </div>
        <el-card shadow='never'>
          <el-row>
            <dynTable
              ref='dynTable'
              loading={this.tableLoading}
              table-data={this.tableData}
              table-columns={tableColumns}
              handle-selection-change={this.handleSelectionChange}
              row-click={this.rowClick}
            />
          </el-row>
          <pagination
            total={this.total}
            page={this.listQuery.page} {...{ on: 'update:page' }}
            size={this.listQuery.size} {...{ on: 'update:size' }}
            vOn:pagination={this.getList}
          />
        </el-card>
        <tpirftForm ref='tpirftForm' vOn:initList={this.initList}/>
      </div>
    )
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
  // .el-form-item {
  //   margin-bottom: 15px;
  // }
}
</style>
